import UploadImg from '@/components/upload-img';
import useDelData from '@/hooks/use-del-data';
import useFetchList from '@/hooks/use-fetch-list';
import useInsert from '@/hooks/use-insert';
import { formatDate } from '@/utils/formatDate';
import { Button, Form,DatePicker, Image, Input, Modal, Radio, Space, Table } from 'antd'
import moment from 'moment';
import React, { useState } from 'react'
import { activityStatus } from './activityManage.config'
const { RangePicker } = DatePicker;

function ActivityManage() {

  //table
  const { dataSource, total, filterParams, setFilterParams,getData } = useFetchList({
    url:'/admin/base/activityManage/page'
  })
  const { ids, setIds, delData } = useDelData({
    url:"/admin/base/activityManage/delete",
    success: () => {
      setFilterParams({
        ...filterParams,
        page: 1
      })
    }
  })
  const [form]=Form.useForm()
  const {handleOk,setIsModalOpen,isModalOpen,setDataInfo}=useInsert({
    form,
    convertData:(data:any)=>{
      data.activityStartDate=formatDate(data.activityDate[0])
      data.activityEndDate=formatDate(data.activityDate[1])
      return data
    },
    createData:(data:any)=>{
      fetch("/admin/base/activityManage/add", {
        method: "POST",
        body: JSON.stringify(data),
        headers: {
          "Content-Type": "application/json"
        }
      }).then(res => res.json()).then(res => {
        // console.log(res)
      })
    },
    updateData:(data:any)=>{
      fetch("/admin/base/activityManage/update", {
        method: "POST",
        body: JSON.stringify(data),
        headers: {
          "Content-Type": "application/json"
        }
      }).then(res => res.json()).then(res => {
        // console.log(res)
      })
    },
    success:()=>{
      setFilterParams({...filterParams,page:1})
    },
    getDetail:async (id:any)=>{
      const data=await fetch("/admin/base/activityManage/info", {
        method: "POST",
        body: JSON.stringify({id}),
        headers: {
          "Content-Type": "application/json"
        }
      }).then(res => res.json()).then(res => {
        // console.log(res)
        return res.data
      })
      return data
    },
    converDetailData:(data:any)=>{
      data.activityDate=[
        moment(data.activityStartDate,'YYYY/MM/DD'),
        moment(data.activityEndDate,'YYYY/MM/DD')
      ]
      return data
    }
  })
  const columns = [
    {
      title: '活动名称',
      dataIndex: 'activityName',
      key: 'id',
      width: 300
    },
    {
      title: '活动封面',
      dataIndex: 'activityImg',
      key: 'id',
      width: 100,
      render: (text) => {
        return <Image width={100} src={text} />
      }
    },
    {
      title: '活动状态',
      dataIndex: 'activityStatus',
      key: 'id',
      width: 100,
      render: (text) => {
        switch (text) {
          case '0':
            return '未开始'
          case '1':
            return '进行中'
          case '2':
            return '已结束'
        }
      }
    },
    {
      title: '活动上限',
      dataIndex: 'activityMax',
      key: 'id',
    },
    {
      title: '报名人数',
      dataIndex: 'activityRegistered',
      key: 'id',
    },
    {
      title: '活动时间',
      dataIndex: 'activityStartDate',
      key: 'id',
      render: (text, item) => {
        return `${item.activityStartDate}-${item.activityEndDate}`
      }
    },
    {
      title: '主办方',
      dataIndex: 'business',
      key: 'id',
    },
    {
      title: '操作',
      dataIndex: 'id',
      key: 'id',
      render: (test, item) => {
        return (
          <Space>
            <Button type='primary' onClick={()=>setDataInfo(item.id)}>编辑</Button>
            <Button danger onClick={() => delData([item.id])}>删除</Button>
            <Button>查看报名人数</Button>
          </Space>
        )
      }
    },
  ];

  //modal
  const handleCancel=()=>{
    setIsModalOpen(false)
  }

  return (
    <div>
      <Space>
        <Button onClick={()=>getData()}>刷新</Button>
        <Button type='primary' onClick={()=>setIsModalOpen(true)}>新增</Button>
        <Button danger onClick={() => delData()}>删除</Button>
        <Radio.Group size='large' defaultValue="" onChange={(e) => {
          setFilterParams({
            ...filterParams,
            page: 1,
            activityStatus: e.target.value,
          } as any)
        }}>
          {
            activityStatus.map((item, index) => (
              <Radio.Button key={index} value={item.value}>{item.label}</Radio.Button>
            ))
          }
        </Radio.Group>
        <Input placeholder='请输入活动名称' onChange={(e) => {
          setFilterParams({
            ...filterParams,
            page: 1,
            activityName: e.target.value,
          } as any)
        }}></Input>
      </Space>
      <Table scroll={{
        x: 1500
      }} style={{ marginTop: '20px' }} columns={columns} dataSource={dataSource} pagination={{
        total,
        pageSize: filterParams.size,
        current: filterParams.page,
        onChange: (page) => {
          setFilterParams({
            ...filterParams,
            page,
          })
        }
      }}
        rowSelection={{
          type: 'checkbox',
          onChange: (keys) => {
            // console.log(keys);
            setIds(keys)
          }
        }} />
      <Modal title="新增"  open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Form labelCol={{span:4}} wrapperCol={{span:20}} form={form}>
          <Form.Item label='活动名' name='activityName' rules={[{ required: true, message: '请输入活动名' }]}>
            <Input></Input>
          </Form.Item>
          <Form.Item label='活动上限' name='activityMax'>
            <Input></Input>
          </Form.Item>
          <Form.Item label='活动时间' name='activityDate'>
          <RangePicker/>
          </Form.Item>
          <Form.Item label='主办方' name='business'>
            <Input></Input>
          </Form.Item>
          <Form.Item label='活动封面' name='activityImg'>
            <UploadImg />
          </Form.Item>
          <Form.Item label='活动详情' name='activityDesc'>
            <Input.TextArea />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}

ActivityManage.wrappers = ["@/wrappers/auth"]
export default ActivityManage